<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <script type="text/javascript" src="../assets/js/vue.js" ></script>
	    <title>vue.directive 自定义指令</title>
	</head>
	<body>
		<h1>Vue2.0全局API-Vue.directive自定义指令</h1>
		<div id="app">
			<div v-mycommon="color">{{num}}</div>
			<p><button @click="add">按钮</button></p>
		</div>
		
	</body>
	
	<script type="application/javascript">
		//自定义指令，注意必须是小写的，自定义的指令
		//包含5个生命周期，bind初始化，inserted，update，componentUpdated,unbind
		Vue.directive('mycommon',{
		    //被绑定时调用
            bind:function(el,binding,vnode){
				console.log("当前的dom元素");
				console.log(el);
				console.log("一个对象，包含一些属性");
				console.log(binding);			
				el.style="color:"+binding.value;	
            },
            inserted:function(){//绑定到节点
                console.log('2 - inserted');
            },
            update:function(){//组件更新
                console.log('3 - update');
            },
            componentUpdated:function(){//组件更新完成
                console.log('4 - componentUpdated');
            },
            unbind:function(){//解绑
                console.log('5 - unbind');
            }
        });

		//调用该方法可以使得vue的功能失效
        function unbind(){
            app.$destroy();
        }		
		
		var app = new Vue({
			el: '#app',
			data:{
				message:'Hello World',
				num:10,
				color:'red'
			},
			methods:{
				add:function(){
					this.num++;
				}
			}
		})
	</script>
</html>